<template>
  <div class="Pager-container" v-if="Larger>1">
<a @click="PagerChanger(1)" :class ='{disabled :current===1}'>|&lt;&lt;</a>
<a @click="PagerChanger(current-1)" :class ='{disabled :current===1}'>&lt;&lt;</a>
<a @click="PagerChanger(n)"  v-for="(n ,i) in Numbers" :key='i' :class='{active:n===current}'>{{n}}</a>
<a @click="PagerChanger(current+1)" :class ='{disabled :current===Larger}'>&gt;&gt;</a>
<a @click="PagerChanger(Larger)" :class ='{disabled :current===Larger}'>&gt;&gt;|</a>
  </div>
</template>

<script>


export default {
props:{
    current:{
        type:Number,
        default:1
    },
    total:{
        type:Number,
        default:0
    },
    limit:{
        type:Number,
        default:10
    },
    visibleNumber:{
        type:Number,
        default:10
    }
},
computed:{
Larger(){//总页码数
let larger= Math.ceil(this.total/this.limit) ;
return larger;
},
Minpage(){//展示最小页码数
   let min =this.current-Math.floor(this.visibleNumber/2);
   if(min<1){
       min=1;
   }
   return min;
},
Maxpage(){//展示最大页码数
let max =this.Minpage+this.visibleNumber-1;
if(max>this.Larger){
    max=this.Larger;
}
return max;
},
Numbers(){//展示中间页码的数组
let nums=[];
for(let i=this.Minpage;i<=this.Maxpage;i++){
    nums.push(i);
}
return nums;
},
},
methods:{
   PagerChanger( newpager){
       if(newpager<1){
           newpager=1;
       }
       if(newpager>this.Larger){
      newpager=this.Larger;
       }
       if(newpager===this.current){
           return;
       }
 this.$emit('PagerChanger',newpager);
   } ,
}
}
</script>

<style lang="less" scoped>
@import "../../style/var.less";
.Pager-container{
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
a{
margin: 0 7px ;
color:@primary;
cursor: pointer;
&.active{
color:@words;
font-weight: bold;
cursor: text;
}
&.disabled{
    color: @lightWords;
cursor:not-allowed;
}
}

</style>